<!DOCTYPE html>
<html  xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE">
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
    <title>设置-个人信息</title>
     <link rel="icon" href="./img/favicon.ico">

	<link rel="stylesheet" type="text/css" th:href="@{/css/elementui.css}" />
    <link rel="stylesheet" type="text/css" href="./css/all.css" />
    <link rel="stylesheet" type="text/css" href="./css/pages-seckillOrder.css" />
</head>

<body>
<div id="app">
    <!-- 头部栏位 -->
    <!--页面顶部-->
<div id="nav-bottom">
	<!--顶部-->
	<div class="nav-top">
		<div class="top">
			<div class="py-container">
				<div class="shortcut">
					<ul class="fl">
						<li class="f-item">青橙欢迎您！</li>
						<li class="f-item">
								<span v-if="!loginInfo.username">
									请<a th:href="@{/loginUI}">登录</a>
								</span>
							<span v-if="loginInfo.username">
									{{loginInfo.username}}
									<a :plain="true" href="javascript:void(0)" @click="logout">退出登录</a>
								</span>
							<span>
									<a th:href="@{/registerUI}">免费注册</a>
								</span>
						</li>
					</ul>
					<div class="fr typelist">
						<ul class="types">
							<li class="f-item"><span><a href="javascript:void(0)" @click="openMyOrder">我的订单</a></span></li>
							
							<li class="f-item"><span><a href="cart.html" target="_blank">我的购物车</a></span></li>
							<li class="f-item"><span><a  href="javascript:void(0)" @click="openMyHome" >我的青橙</a></span></li>
							<li class="f-item"><span>青橙会员</span></li>						
							<li class="f-item"><span>企业采购</span></li>						
							<li class="f-item"><span>关注青橙</span></li>
							<li class="f-item"><span><a href="cooperation.html" target="_blank">合作招商</a></span></li>
							<li class="f-item"><span><a href="shoplogin.html" target="_blank">商家后台</a></span></li>				
							<li class="f-item"><span>网站导航</span></li>
						</ul>
					</div>
					
				</div>
			</div>
		</div>

		<!--头部-->
		<div class="header">
			<div class="py-container">
				<div class="yui3-g Logo">
					<div class="yui3-u Left logoArea">
						<a class="logo-bd" title="青橙"  href="javascript:void(0)" th:href="@{/index}"></a>
					</div>
					<div class="yui3-u Rit searchArea">
						<div class="search">
							<form action="" class="sui-form form-inline">
								<!--searchAutoComplete-->
								<div class="input-append">
									<input type="text" id="autocomplete"   class="input-error input-xxlarge" />
									<button class="sui-btn btn-xlarge btn-danger" type="button">搜索</button>
								</div>
							</form>
						</div>
					</div>
					
				</div>

			</div>
		</div>
	</div>
</div>

    <!--header-->
    <div id="account">
        <div class="py-container">
            <div class="yui3-g home">
                <!--左侧列表-->
                <div class="yui3-u-1-6 list">

                    <div class="person-info">
                        <div class="person-photo"><img src="./img/_/photo.png" alt=""></div>
                        <div class="person-account">
                            <span class="name">{{loginInfo.username}}</span>
                            <span class="safe">账户安全</span>
                        </div>
                        <div class="clearfix"></div>
                    </div>
                    <div class="list-items">
                        <dl>
							<dt><i>·</i> 订单中心</dt>
							<dd><a href="javascript:void(0)" @click="openMyOrder">我的订单</a></dd>
							<dd><a href="javascript:void(0)" @click="openMyOrder">待付款</a></dd>
							<dd><a href="javascript:void(0)" @click="openMyOrder">待发货</a></dd>
							<dd><a href="javascript:void(0)" @click="openMyOrder">待收货</a></dd>
						</dl>
						<dl>
							<dt><i>·</i> 设置</dt>
							<dd><a href="center-setting-info.html" class="list-active" >个人信息</a></dd>
							<dd><a href="javascript:void(0)" th:href="@{/openAddress}" :class="orderStatus == 2 ? 'list-active' : ''">地址管理</a></dd>
							<dd><a th:href="@{/centerSettingSafe}" >安全管理</a></dd>
						</dl>
                    </div>
                </div>
                <!--右侧主内容-->
                <div class="yui3-u-5-6">
                    <div class="body userInfo">
                        <ul class="sui-nav nav-tabs nav-large nav-primary ">
                            <li class="active"><a href="#one" data-toggle="tab">基本资料</a></li>
                            <li><a href="#two" data-toggle="tab">头像照片</a></li>
                        </ul>
                        <div class="tab-content ">
                            <div id="one" class="tab-pane active">
                                <form id="form-msg" class="sui-form form-horizontal">
                                    <div class="control-group">
                                        <label for="inputName" class="control-label">昵称：</label>
                                        <div class="controls">
                                            <input type="text" id="inputName" name="email" placeholder="昵称">
                                        </div>
                                    </div>
                                    <div class="control-group">
                                        <label for="inputGender" class="control-label">性别：</label>
                                        <div class="controls">
                                            <label data-toggle="radio" class="radio-pretty inline">
                                            <input type="radio" name="gender" value="1"><span>男</span>
                                        </label>
                                            <label data-toggle="radio" class="radio-pretty inline">
                                            <input type="radio" name="gender" value="2"><span>女</span>
                                        </label>
                                        </div>
                                    </div>
                                    <div class="control-group">
                                        <label for="inputPassword" class="control-label">生日：</label>
                                        <div class="controls">
                                            <select id="select_year2" rel="1990"></select>年
                                            <select id="select_month2" rel="4"></select>月
                                            <select id="select_day2" rel="3"></select>日
                                        </div>
                                    </div>


                                    <div class="control-group">
                                        <label for="inputPassword" class="control-label">所在地：</label>
                                        <div class="controls">
                                            <div data-toggle="distpicker">
												<!--省-->
												<select id="province" name="province" onchange="changeCity()">
													<option value="">-- 请选择省 --</option>
												</select>&nbsp;&nbsp;&nbsp;
												<!-- 市 -->
												<select id="city" name="city" onchange="changeDistrict()">
													<option value="">-- 请选择市 --</option>
												</select>&nbsp;&nbsp;&nbsp;
												<!-- 县(区) -->
												<select id="district" name="district" onchange="getWeather()">
													<option value="">-- 请选择县(区) --</option>
												</select>

											</div>
                                        </div>
                                    </div>
                                    <div class="control-group">
                                        <label for="inputJob" class="control-label">职业：</label>
                                        <div class="controls"><span class="sui-dropdown dropdown-bordered select"><span class="dropdown-inner"><a role="button" data-toggle="dropdown" href="#" class="dropdown-toggle">
                                                <input name="job" type="hidden" data-rules="required"><i class="caret"></i><span>请选择</span></a>
                                            <ul id="menu4" role="menu" aria-labelledby="drop4" class="sui-dropdown-menu">
                                                <li role="presentation"><a role="menuitem" tabindex="-1" href="javascript:void(0);" value="bj">程序员</a></li>
                                                <li role="presentation"><a role="menuitem" tabindex="-1" href="javascript:void(0);" value="sb">产品经理</a></li>
                                                <li role="presentation"><a role="menuitem" tabindex="-1" href="javascript:void(0);" value="sb">UI设计师</a></li>
                                            </ul>
                                            </span>
                                            </span>
                                        </div>
                                    </div>
                                    <div class="control-group">
                                        <label for="sanwei" class="control-label"></label>
                                        <div class="controls">
                                            <button type="submit" class="sui-btn btn-primary">立即注册</button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                            <div id="two" class="tab-pane">

                                <div class="new-photo">

                                    <p>当前头像：</p>
                                    <div class="upload">
										<el-form>
										<!-- 头像 -->
										<el-form-item label="头像">
											<el-upload
													class="avatar-uploader"
													action="http://localhost:88/api/oss"
													:show-file-list="false"
													:on-success="handleAvatarSuccess"
													:on-remove="handleRemove"
													:before-upload="beforeAvatarUpload"
											>
												<img v-if="imageUrl" :src="imageUrl" class="avatar" />
												<span
														v-if="imageUrl"
														class="el-upload-action"
														@click.stop="handleRemove()"
												>
                <i class="el-icon-delete"></i>
              </span>
												<i v-else class="el-icon-upload2 avatar-uploader-icon" stop></i>
											</el-upload>
										</el-form-item>
										</el-form>
                                    </div>

                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 底部栏位 -->
    <!--页面底部-->
<div class="clearfix footer">
	<div class="py-container">
		<div class="footlink">
			<div class="Mod-service">
				<ul class="Mod-Service-list">
					<li class="grid-service-item intro  intro1">

						<i class="serivce-item fl"></i>
						<div class="service-text">
							<h4>正品保障</h4>
							<p>正品保障，提供发票</p>
						</div>

					</li>
					<li class="grid-service-item  intro intro2">

						<i class="serivce-item fl"></i>
						<div class="service-text">
							<h4>正品保障</h4>
							<p>正品保障，提供发票</p>
						</div>

					</li>
					<li class="grid-service-item intro  intro3">

						<i class="serivce-item fl"></i>
						<div class="service-text">
							<h4>正品保障</h4>
							<p>正品保障，提供发票</p>
						</div>

					</li>
					<li class="grid-service-item  intro intro4">

						<i class="serivce-item fl"></i>
						<div class="service-text">
							<h4>正品保障</h4>
							<p>正品保障，提供发票</p>
						</div>

					</li>
					<li class="grid-service-item intro intro5">

						<i class="serivce-item fl"></i>
						<div class="service-text">
							<h4>正品保障</h4>
							<p>正品保障，提供发票</p>
						</div>

					</li>
				</ul>
			</div>
			<div class="clearfix Mod-list">
				<div class="yui3-g">
					<div class="yui3-u-1-6">
						<h4>购物指南</h4>
						<ul class="unstyled">
							<li>购物流程</li>
							<li>会员介绍</li>
							<li>生活旅行/团购</li>
							<li>常见问题</li>
							<li>购物指南</li>
						</ul>

					</div>
					<div class="yui3-u-1-6">
						<h4>配送方式</h4>
						<ul class="unstyled">
							<li>上门自提</li>
							<li>211限时达</li>
							<li>配送服务查询</li>
							<li>配送费收取标准</li>
							<li>海外配送</li>
						</ul>
					</div>
					<div class="yui3-u-1-6">
						<h4>支付方式</h4>
						<ul class="unstyled">
							<li>货到付款</li>
							<li>在线支付</li>
							<li>分期付款</li>
							<li>邮局汇款</li>
							<li>公司转账</li>
						</ul>
					</div>
					<div class="yui3-u-1-6">
						<h4>售后服务</h4>
						<ul class="unstyled">
							<li>售后政策</li>
							<li>价格保护</li>
							<li>退款说明</li>
							<li>返修/退换货</li>
							<li>取消订单</li>
						</ul>
					</div>
					<div class="yui3-u-1-6">
						<h4>特色服务</h4>
						<ul class="unstyled">
							<li>夺宝岛</li>
							<li>DIY装机</li>
							<li>延保服务</li>
							<li>品优购E卡</li>
							<li>品优购通信</li>
						</ul>
					</div>
					<div class="yui3-u-1-6">
						<h4>帮助中心</h4>
						<img src="./img/wx_cz.jpg">
					</div>
				</div>
			</div>
			<div class="Mod-copyright">
				<ul class="helpLink">
					<li>关于我们<span class="space"></span></li>
					<li>联系我们<span class="space"></span></li>
					<li>关于我们<span class="space"></span></li>
					<li>商家入驻<span class="space"></span></li>
					<li>营销中心<span class="space"></span></li>
					<li>友情链接<span class="space"></span></li>
					<li>关于我们<span class="space"></span></li>
					<li>营销中心<span class="space"></span></li>
					<li>友情链接<span class="space"></span></li>
					<li>关于我们</li>
				</ul>
				<p>地址：北京市昌平区建材城西路金燕龙办公楼一层 邮编：100096 电话：400-618-4000 传真：010-82935100</p>
				<p>京ICP备08001421号京公网安备110108007702</p>
			</div>
		</div>
	</div>
</div>
</div>
<!--页面底部END-->

	<script type="text/javascript" src="./js/all.js"></script>
	<script type="text/javascript" src="./js/plugins/jquery/jquery.min.js"></script>
	<script type="text/javascript" src="./js/pages/index.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/js-cookie@2/src/js.cookie.min.js"></script>
	<script th:src="@{/js/vue.js}"></script>
	<script th:src="@{/js/axios.js}"></script>
	<script th:src="@{/js/interceptor.js}"></script>
	<script th:src="@{/js/elementui.js}"></script>
	<script>
		//页面在加载完毕事件---->onload
		$(function () {
			//发送请求获取所有的省份，
			$.ajax({
				type:"GET",//type:请求方式
				url:"provience",//请求的uri连接地址
				//proviences封装后台返回的JSON数据
				//success:请求成功的回调函数
				success:function (proviences) {
					//proviences是一个集合，获取集合数据，
					//循环生成option标签，value属性值为城市名，显示的数据也是城市名
					for(var i = 0;i < proviences.length;i++){
						//返回的是List集合通过下标获取数据。
						//如果返回的是map，根据key获取数据
						//返回的city对象。根据city.属性名来获取数据
						var option = $("<option></option>").text(proviences[i]);
						//生成value属性
						option.attr("value",proviences[i]);
						//将option添加到select标签中
						$("#province").append(option);
					}
				}
			})
		})

		/*
             作用：填充对应省份下的城市
            思路：
                1、根据provinceZh将leaderZh取出
                2、并且对leaderZh去重
                3、清空city下拉框
                4、将新的数据填充进去
         */

		function changeCity() {
			//获取选中的省份的名字
			var pName = $("#province").val();
			alert("省份名字==》"+pName)
			$.ajax({
				type:"GET",
				url:"city",
				data:{"pName":pName},
				success:function (cities) {
					//清空城市的下拉框,这串代码就是替换select标签中内容
					$("#city").html("<option value=''>-- 请选择市 --</option>")
					//清空区的下拉框
					$("#district").html("<option value=''>-- 请选择县(区) --</option>")
					for(var i = 0;i < cities.length;i++){
						var option = $("<option></option>").text(cities[i]);
						//生成value属性
						option.attr("value",cities[i]);
						//将option添加到select标签中
						$("#city").append(option);
					}
				}
			})
		}
		/*
        作用：获取市下的所有区和县
         */
		function changeDistrict() {
			//1、获取省份
			var pName = $("#province").val();
			//2、获取城市
			var cName = $("#city").val();
			alert(pName+"===>"+cName)
			$.ajax({
				type:"GET",
				url:"area",
				data:{"pName":pName,"cName":cName},
				success:function (area) {
					//清空区县下拉框
					$("#district").html("<option value=''>-- 请选择县(区) --</option>")
					//循环
					for(var i = 0;i < area.length;i++){
						//text为要显示在页面上的数据，显示名字
						var option = $("<option></option>").text(area[i].cityZh);
						//封装value属性值，value属性是传递到后台的数据需要是id
						option.attr("value",area[i].id);
						$("#district").append(option);
					}
				}
			})

		}
		var vue = new Vue({
			el: '#app',
			data() {
				return {
					loginInfo: {},
					token: '',
					imageUrl: "",
					files: []
				}
			},
			methods: {
				//打开我的账户
				openMyHome(){
					if (!this.loginInfo.username) {
						this.$confirm('您还为登陆为您跳转登陆, 是否继续?', '提示', {
							confirmButtonText: '确定',
							cancelButtonText: '取消',
							type: 'warning'
						}).then(() => {
							//点击确定跳转登陆
							window.location.href='/portal/loginUI'
						}).catch(() => {
							this.$message({
								type: 'info',
								message: '已取消'
							});
						});
						return
					}
					//跳转页面
					window.location.href='/portal/myHome'
				},
				// 打开我的订单
				openMyOrder () {
					if (!this.loginInfo.username) {
						this.$confirm('您还为登陆为您跳转登陆, 是否继续?', '提示', {
							confirmButtonText: '确定',
							cancelButtonText: '取消',
							type: 'warning'
						}).then(() => {
							//点击确定跳转登陆
							window.location.href='/portal/loginUI'
						}).catch(() => {
							this.$message({
								type: 'info',
								message: '已取消'
							});
						});
						return
					}
					window.location.href='/portal/myOrder'
				},
				// 从Cookie中获取用户信息
				showInfo() {
					var user = Cookies.get('qingcheng_user')
					console.log(user)
					// 把字符串转换json对象
					if (user) {
						this.loginInfo = JSON.parse(user)
						// console.log(this.loginInfo)
					}
				},
				logout () {
					// 清空cookie值
					Cookies.set('qingcheng_token', '', {domain: 'localhost'})
					Cookies.set('qingcheng_user', '', {domain: 'localhost'})
					this.$message({
						message: '退出登陆成功',
						type: 'success'
					});
					// 回到首页面
					window.location.href='/portal/index'
				},
				wxLogin() {
					if (this.token == '') return
					//把token存在cookie中、也可以放在localStorage中
					Cookies.set('qingcheng_token', this.token, {domain: 'localhost'})
					Cookies.set('qingcheng_user', '', {domain: 'localhost'})
					//登录成功根据token获取用户信息
					axios.get('/portal/getUserInfo').then(response => {
						this.loginInfo = response.data.data.tbUser
						// console.log(this.loginInfo)
						// 将用户信息记录cookie
						Cookies.set('qingcheng_user', this.loginInfo, {domain: 'localhost'})
					})
				},
				// 移除图片
				handleRemove() {
					this.files = [];
					this.imageUrl = "";
				},
				// 上传成功回调
				handleAvatarSuccess(res, file) {
					this.imageUrl = res.data.fileUrl;
					this.files.push(file);
				},
				// 上传前格式和图片大小限制
				beforeAvatarUpload(file) {
					const type =
							file.type === "image/jpeg" ||
							"image/jpg" ||
							"image/webp" ||
							"image/png";
					const isLt2M = file.size / 1024 / 1024 < 2;
					if (!type) {
						this.$message.error("图片格式不正确!(只能包含jpg，png，webp，JPEG)");
					}
					if (!isLt2M) {
						this.$message.error("上传图片大小不能超过 2MB!");
					}
					return type && isLt2M;
				},
			},
			created() {
				// this.token = this.$route.query.token
				// if (this.token) {
				// 	this.wxLogin()
				// }
				// localhost:9900/index?token=xxx...&a=1&b=1
				const querystring = location.search.substring(1)
				const queryary = querystring.split('&')
				const params = queryary[0].split('=')
				this.token = params[1]
				// console.log(this.token)
				if (this.token) {
					this.wxLogin()
				}
				this.showInfo()
				this.imageUrl = this.loginInfo.headPic;
			}
		})
	</script>
   


</body>

</html>